<template>
    <div class="login">
        <!-- 左侧图片 -->
        <div class="pic">
            <img src="../assets/image/登录背景.png" alt="">
        </div>
        <!-- 右侧登录模块 -->
        <div class="login-box">
            <!-- 标题 -->
            <div class="title">
                <img src="../assets/image/title.png" alt="">
            </div>
            <!-- 登录form表单 -->
            <el-form ref="formRef" :model="obj" :rules="rules">
                <el-form-item prop="user">
                    <el-input placeholder="账号" v-model="obj.user">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="密码" v-model="obj.password" show-password>
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <Key />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item class="three" prop="code">
                    <el-input placeholder="验证码" v-model="obj.code">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                    <div class="pic1"><img src="../assets/image/验证码.png" alt=""></div>
                </el-form-item>
            </el-form>
            <!-- 按钮 -->
            <el-button type="danger" @click="submitForm(formRef)">立即登录</el-button>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { Lock, Key, User } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive } from 'vue'
// from表单数据
const obj = ref({
    user: '',
    password: "",
    code: ''
})
// from表单数据

// 设置表单检验
const rules = reactive<FormRules>({
    user: [
        { required: true, message: '请输入账号', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
    ],
})
// 设置表单检验

// 提交对整个表单校验
const formRef = ref<FormInstance>()
const submitForm = async (form) => {
    try {
        await form.validate()
        console.log(1)
    } catch (error) {
        console.log(error)
    }
}
// 提交对整个表单校验

</script>

<style lang='less' scoped>
.login {
    width: 100vw;
    height: 100vh;
    display: flex;

    .pic {
        img {
            width: 65vw;
            height: 100vh;
        }
    }

    .login-box {
        height: 100vh;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50*0.80px;

        // 标题
        .title {
            margin-bottom: 65*0.80px;

            img {
                width: 350*0.80px;
            }
        }

        // form表单
        .el-form {
            width: 100%;

            ::v-deep .el-input__wrapper {
                padding: 0px 15px;
            }

            .el-form-item {
                margin-bottom: 22*0.80px;
            }

            ::v-deep .el-input {
                height: 65*0.80px;
                // font-size: 20px;

            }

            .three {
                .pic1 {
                    margin-left: 5px;
                }

                .el-input {
                    width: 70%;
                }
            }

        }

        .el-button {
            width: 100%;
            font-size: 20px;
            padding: 25px;
        }

        .el-button--danger {
            background-image: linear-gradient(to right, rgb(217, 46, 44), rgb(248, 110, 43));
        }
    }
}
</style>